<template>
  <view class="container">
    <!-- 顶部导航 -->
    <lg-topbar bgColor="#fff" height="132rpx">
      <view class="bg-topbar-content">
        <view @click="Back">
          <uv-icon name="arrow-left" size="25"></uv-icon>
        </view>
        <view>
          {{ t("Categories") }}
        </view>
        <view>
          {{ t("Reset") }}
        </view>
      </view>
    </lg-topbar>
    <view style="padding: 20rpx;">
      <uv-search v-model="searchText" :showAction="true" actionText="搜索" :animation="true" height="80rpx"></uv-search>
    </view>
    <view v-if="categoryList.length > 0" class="all-category" @click="resetSearch">ALL</view>
    <scroll-view v-if="loadEnd && filteredList.length > 0" class="scroll" scroll-y="true" refresher-enabled="true"
      scroll-with-animation="true" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
      @scrolltolower="onScrollBottom">
      <categoryCard v-for="item in filteredList" :key="item.name" :item="item" @click="toShopCart(item)"
        :hidden-next="true"></categoryCard>
    </scroll-view>
    <view class="nodata" v-else>
      <image class="img" src="/static/images/cart/noData.png" mode="widthFix"></image>
      <view class="">
        {{ t("No results found") }}
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import categoryCard from "./components/search-card.vue"
import { onLoad } from "@dcloudio/uni-app"
import { useCategoryStore } from '@/store'

const { t } = useI18n()
const loadEnd = ref(true)
const triggered = ref(false)
const categoryList = ref([
])
const searchText = ref('')
const categoryStore = useCategoryStore()
onLoad((options) => {
  let data = JSON.parse(decodeURIComponent(options.category))
  categoryStore.setSelectedSecondCategory(data)
  categoryList.value = data?.children
  searchText.value = ''
});

// 计算过滤后的列表
const filteredList = computed(() => {
  if (!searchText.value) {
    return categoryList.value
  }
  return categoryList.value.filter(item =>
    item.label.includes(searchText.value)
  )
})

const resetSearch = () => {
  searchText.value = ''
  categoryStore.clearSelectedThirdCategory()
  // 返回上上级页面
  uni.navigateBack({
    delta: 2
  })
}
const onRefresh = () => {
  console.log("onRefresh")
}
const onScrollBottom = () => {
  console.log("onScrollBottom")
}
const Back = () => {
  uni.navigateBack()
}
const toShopCart = (item) => {
  console.log(item)
  // 使用 pinia store 存储数据
  categoryStore.setSelectedThirdCategory(item)
  // 返回上上级页面
  uni.navigateBack({
    delta: 2
  })
}
</script>
<style lang="scss" scoped>
.container {
  background-color: #fff;
  width: 100vw;
  height: 100vh;
}

.bg-topbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 20rpx;
}

.scroll {
  height: calc(100vh - 392rpx);
}

.all-category {
  font-size: 28rpx;
  text-align: center;
  margin: 20rpx;
  border: 1px solid #F0F0F0;
  /* 修改边框颜色为 #F0F0F0 */
  border-radius: 8px;
  height: 100rpx;
  line-height: 100rpx;
}

.nodata {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 120rpx;

  .img {
    width: 200rpx;
    padding-bottom: 20rpx;
  }
}
</style>
